<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="referrer" content="no-referrer">
    <title>商品详情</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入Vue -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import Element UI -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="width: 1400px;margin: 0 auto">
                <img src="../imgs/logo.png" width="300px">
                <a href="index.html">首页</a>
                <el-divider direction="vertical"></el-divider>
                <a href="#">热点资讯</a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://zhaopin.meituan.com/web/social">社会招聘</a>
                <el-divider direction="vertical"></el-divider>
                <a href="https://zhaopin.meituan.com/web/campus">校园招聘</a>
                <el-divider direction="vertical"></el-divider>
                <a href="#">帮助</a>
                <el-divider direction="vertical"></el-divider>
                <span style="float: right;font-size: 15px;margin-top: 35px">
                    欢迎回来<a href="JavaScript:void(0)" style="text-decoration: none"
                               @click="myself">{{nickname}}</a>
                    &nbsp&nbsp&nbsp
                    <a href="JavaScript:void(0)" style="text-decoration: none" @click="logout">退出登录</a>
                </span>
            </div>
            <div style="background-color: #0aa1ed;border-radius: 10px">
                <el-menu style="width: 1400px ;margin: 0 auto" mode="horizontal"
                         background-color="#0aa1ed" text-color="#fff" active-text-color="#0f0"
                         @select="handleSelect">
                    <el-menu-item v-for="c in carousel" :index="c.id">{{c.name}}</el-menu-item>
                    <div style="float:right;position: relative;top:10px;right: 20px">
                        <el-input v-model="keyword" placeholder="请输入搜索内容">
                            <!--  slot="append" 设置按钮嵌入到文本框里面 -->
                            <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main style="width:1400px;margin:0 auto">
            <el-row gutter="20">
                <el-col span="10">
                    <el-card style="width:500px">
                        <img :src="goods.img" width="100%" alt="" v-model="cart.img">
                    </el-card>
                </el-col>
                <el-col span="12">
                    <el-row gutter="20">
                        <p>{{goods.title}}</p>
                        <el-divider></el-divider>
                        <el-col span="12">
                            <p>商品编码:{{goods.spuId}}</p>
                            <p style="font-size: 25px;font-weight: bold;">
                                ${{goods.price}}
                                <span style="font-size: 15px;color: #666666"
                                >原价:<s>{{goods.oldPrice}}</s></span>
                            </p>
                            <template>
                                <el-input-number v-model="cart.num" size="mini"
                                                 @change="handleChange" :min="1" :max="goods.stock"></el-input-number>
                            </template>
                            <div style="margin: 20px 0">
                                <el-button type="primary" @click="addCart">加入购物车</el-button>
                                <el-button type="primary" @click="dialogVisible = true">立即购买</el-button>
                                <el-dialog
                                        :visible.sync="dialogVisible"
                                        width="40%"
                                        :before-close="handleClose">
                                    <el-form :model="cart" label-width="80px">
                                        <el-form-item label="商品名称" span="3">{{goods.title}}
                                        </el-form-item>
                                        <el-form-item label="商品编号" span="1">
                                            <el-tag size="small">{{goods.spuId}}</el-tag>
                                        </el-form-item>
                                        <el-form-item label="价格" span="1">{{goods.price}}
                                        </el-form-item>
                                        <el-form-item label="数量" span="1">{{cart.num}}</el-form-item>
                                        <el-form-item label="收货地址" span="1" prop="address">
                                            <el-select v-model="cart.address" placeholder="请选择收货地址"
                                                       size="small"
                                                       @change="handleChange">
                                                <el-option
                                                        v-for="item in address"
                                                        :key="item.id"
                                                        :label="item.address"
                                                        :value="{value:item.id,label:item.address}">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-form>
                                    <el-form ref="order" :rules="rules" :model="order" label-width="80px">
                                        <el-form-item label="收货人" size="small" prop="recipients">
                                            <el-input v-model="order.recipients"></el-input>
                                        </el-form-item>
                                        <el-form-item label="联系电话" size="small" prop="phone">
                                            <el-input v-model="order.phone"></el-input>
                                        </el-form-item>
                                        <el-form-item label="备注" size="small">
                                            <el-input
                                                    label="备注"
                                                    type="textarea"
                                                    :rows="2"
                                                    v-model="cart.remark" placeholder="请输入备注"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="submit">购 买</el-button>
                                    </span>
                                </el-dialog>
                            </div>
                        </el-col>
                        <el-col span="12">
                            <p style="font-size: 15px;color: #666666;">
                                销量:{{goods.saleCount}} 库存:{{goods.stock}}
                                浏览量:{{goods.viewCount}}<br>
                                商品发布时间:{{goods.gmtCreate}}
                            </p>
                        </el-col>
                    </el-row>
                    <el-row gutter="20" style="text-align: center">
                        <el-col span="8">
                            <el-card>
                                <img src="../imgs/ewm.jpg" alt="">
                            </el-card>
                            <p>扫描关注公众号</p>
                        </el-col>
                        <el-col span="8">
                            <el-card>
                                <img src="../imgs/ewm.jpg" alt="">
                            </el-card>
                            <p>扫描下载APP</p>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <div style="background-image:url('../imgs/wave.png'); height:95px"></div>
        </el-footer>
    </el-container>

</div>
</body>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                nickname: localStorage.getItem('nickname'),
                dialogVisible: false,
                keyword:'',
                carousel: [],
                address: [],
                goods: {},
                cart: {
                    userId: localStorage.getItem('userId'),
                    title: '',
                    img: '',
                    price: '',
                    spuId: '',
                    num: 1,
                },
                order: {
                    spuId: '',
                    userId: localStorage.getItem('userId'),
                    address: '',
                    price: '',
                    recipients: '',
                    phone: '',
                    num: '',
                    title: '',
                    img: '',
                    remark: '',
                },
                rules: {
                    recipients: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入电话', trigger: 'blur'},
                        {
                            relax: /^(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                            message: '请输入正确的手机号',
                            trigger: 'blur'
                        }
                    ],
                },
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                location.href = '/user/result.html?carouselId=' + key;
            },
            handleChange(address) {
                const {value, label} = address;
                v.order.address = label;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            addCart() {
                // 将商品信息传给cart数组
                v.cart.title = v.goods.title;
                v.cart.img = v.goods.img;
                v.cart.price = v.goods.price;
                v.cart.spuId = v.goods.spuId;
                // 发送请求
                axios.post('/cart/insert', v.cart)
                    .then(function (response) {
                        if (response.data.state === 20000) {
                            v.$message({
                                message: '添加购物车成功',
                                type: 'success'
                            });
                        } else {
                            v.$message.error('添加购物车失败');
                        }
                    });
            },
            submit() {
                v.order.spuId = v.goods.spuId;
                v.order.title = v.goods.title;
                v.order.img = v.goods.img;
                v.order.price = v.goods.price;
                v.order.num = v.cart.num;
                if(v.nickname===''||v.nickname===null){
                    v.$message({
                        message: '请先登录',
                        type: 'warning'
                    });
                    location.href='/login.html'
                    return;
                }
                axios.post('/order/insert', v.order)
                    .then(function (response) {
                       let responseBody = response.data;
                       if (responseBody.state === 20000) {
                           v.$message({
                               message: '下单成功',
                               type: 'success'
                           });
                       } else {
                           v.$message.error(responseBody.message);
                       }
                        v.dialogVisible=false;
                    });
            },
            myself() {
                console.log("即将进入我的中心")
                location.href = '/user/Myself.html'
            },
            logout() {
                location.href = '/login.html';
            },
            search() {
                if (v.keyword.trim() === '') {
                    v.$message({
                        message: '搜索内容不能为空！',
                        type: 'warning'
                    });
                    return;
                }
                location.href = '/user/search.html?keyword=' + v.keyword;
            }
        },
        created: function () {
            // 发请求 通过商品ID查询商品详情
            axios.get("/goods/selectById" + location.search).then(function (response) {
                let responseBody = response.data;
                if (responseBody.state === 20000) {
                    console.log(responseBody.data);
                    v.goods = responseBody.data;
                }
            })
            axios.get('/carousel/list')
                .then(function (response) {
                    v.carousel = response.data.data;
                });
            axios.get('/address/selectByUserId?userId=' + localStorage.getItem('userId'))
                .then(function (response) {
                    let responseBody = response.data;
                    if (responseBody.state === 20000) {
                        v.address = responseBody.data;
                    } else {
                        v.$message.error(responseBody.message);
                        location.href = 'addAddress.html';
                    }
                });
        }
    })
</script>
</html>